﻿@page "/component/common/segment"

<Pager DataSource="Menu">
    <Body>
        <Header1 Divider>
            Segment
            <SubHeader>
                A segment is used to create a grouping of related content
            </SubHeader>
        </Header1>

<PresentationPart Title="Demo" Id="demo">
    <RunTemplate>
        <Segment><ParagraphDemo /></Segment>
    </RunTemplate>
    <CodeTemplate>
@Code.GetCode(@"
```html
<Segment>...</Segment>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Raised" Id="raised">
    <Description>
        A segment may be formatted to raise above the page.
    </Description>
    <RunTemplate>
        <Segment Raised><ParagraphDemo /></Segment>
    </RunTemplate>
    <CodeTemplate>
@Code.GetCode(@"
```html
<Segment Raised>...</Segment>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Disabled">
    <Description>
        A segment may show its content is disabled
    </Description>
    <RunTemplate>
        <Segment Disabled><ParagraphDemo /></Segment>
    </RunTemplate>
    <CodeTemplate>
@Code.GetCode(@"
```html
<Segment Disabled>...</Segment>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Loading" Id="loading">
    <Description>
        A segment may show its content is being loaded
    </Description>
    <RunTemplate>
        <Segment Loading><ParagraphDemo /></Segment>
    </RunTemplate>
    <CodeTemplate>
@Code.GetCode(@"
```html
<Segment Loading>...</Segment>
```
        ")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Placeholder" Id="placeholder">
    <Description>
        A segment can be used to reserve space for conditionally displayed content.
    </Description>
    <RunTemplate>
        <Segment Placeholder>
            <Header3 Icon>
                <Icon IconClass="pdf file outline" />
                No documents are listed for this customer.
            </Header3>
            <Button Emphasis="Emphasis.Primary">Add File</Button>
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment Placeholder>
    <Header3 Icon>
        <Icon IconClass=""pdf file outline""/>
        No documents are listed for this customer.
    </Header3>
    <Button Emphasis=""Emphasis.Primary"">Add File</Button>
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart>
    <Description>
        To use inline-block content inside a placeholder, wrap the content in inline.
    </Description>
    <RunTemplate>
        <Segment Placeholder>
            <Header3 Icon>
                <Icon IconClass="pdf file outline" />
                We don't have any documents matching your query
            </Header3>
            <Content Inline>
                <Button Emphasis="Emphasis.Primary">Add File</Button>
                <Button>Clear Directory</Button>
            </Content>
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment Placeholder>
    <Header3 Icon>
        <Icon IconClass=""pdf file outline"" />
        We don't have any documents matching your query
    </Header3>
    <Content Inline>
        <Button Emphasis=""Emphasis.Primary"">Add File</Button>
        <Button>Clear Directory</Button>
    </Content>
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Stacked" Id="stacked">
    <Description>
        A segment can be formatted to show it contains multiple pages
    </Description>
    <RunTemplate>
        <Segment Stacked>
            <ParagraphDemo />
        </Segment>
        <Segment Stacked Tall>
            <ParagraphDemo />
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment Stacked>...</Segment>
<Segment Stacked Tall>...</Segment>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Piled" Id="piled">
    <Description>
        A segment can be formatted to look like a pile of pages
        <Message State="State.Warning">
            Piled SegmentGroup use <b>negative z-index</b> to format the additional pages below the segment. In order for them to appear correctly, your segment's offset container must have a z-index declared.
        </Message>
    </Description>
    <RunTemplate>
        <div style="z-index:1;position:relative">
            <Segment Piled>
                <ParagraphDemo />
            </Segment>
        </div>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<div style=""positioin:relative;z-index:1"">
    <Segment Piled>...</Segment>
</div>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Vertical" Id="vertical">
    <Description>
        A vertical segment formats content to be aligned as part of a vertical group
    </Description>
    <RunTemplate>
        <Segment Vertical>
            <ParagraphDemo />
        </Segment>
        <Segment Vertical>
            <ParagraphDemo />
        </Segment>
        <Segment Vertical>
            <ParagraphDemo />
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment Vertical>
    <ParagraphDemo />
</Segment>
<Segment Vertical>
    <ParagraphDemo />
</Segment>
<Segment Vertical>
    <ParagraphDemo />
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>


<PresentationPart Title="Inverted" Id="inverted">
    <Description>
        A segment can have its colors inverted for contrast
    </Description>
    <RunTemplate>
        <Segment Inverted>
            I'm here to tell you something, and you will probably read me first.
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment Inverted>
    I'm here to tell you something, and you will probably read me first.
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Color" Id="color">
    <RunTemplate>
        <Segment Color="Color.Red">
            <ParagraphDemo />
        </Segment>
        <Segment Color="Color.Blue">
            <ParagraphDemo />
        </Segment>
        <Segment Color="Color.Green">
            <ParagraphDemo />
        </Segment>
        <Segment Color="Color.Orange">
            <ParagraphDemo />
        </Segment>
        <Segment Color="Color.Pink">
            <ParagraphDemo />
        </Segment>

        <Segment Color="Color.Red" Inverted>
            <ParagraphDemo />
        </Segment>
        <Segment Color="Color.Blue" Inverted>
            <ParagraphDemo />
        </Segment>
        <Segment Color="Color.Green" Inverted>
            <ParagraphDemo />
        </Segment>
        <Segment Color="Color.Orange" Inverted>
            <ParagraphDemo />
        </Segment>
        <Segment Color="Color.Pink" Inverted>
            <ParagraphDemo />
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment Color=""Color.Red"">
    <ParagraphDemo />
</Segment>
<Segment Color=""Color.Blue"">
    <ParagraphDemo />
</Segment>
<Segment Color=""Color.Green"">
    <ParagraphDemo />
</Segment>
<Segment Color=""Color.Orange"">
    <ParagraphDemo />
</Segment>
<Segment Color=""Color.Pink"">
    <ParagraphDemo />
</Segment>


<Segment Color=""Color.Red"" Inverted>
    <ParagraphDemo />
</Segment>
<Segment Color=""Color.Blue"" Inverted>
    <ParagraphDemo />
</Segment>
<Segment Color=""Color.Green"" Inverted>
    <ParagraphDemo />
</Segment>
<Segment Color=""Color.Orange"" Inverted>
    <ParagraphDemo />
</Segment>
<Segment Color=""Color.Pink"" Inverted>
    <ParagraphDemo />
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Emphasis" Id="emphasis">
    <Description>
        A segment can be formatted to appear more or less noticeable
    </Description>
    <RunTemplate>
        <Segment>
            <ParagraphDemo />
        </Segment>
        <Segment Emphasis="true">
            <ParagraphDemo />
        </Segment>
        <Segment Emphasis="false">
            <ParagraphDemo />
        </Segment>
        <br />
        <Segment Color="Color.Red" Inverted>
            <ParagraphDemo />
        </Segment>
        <Segment Emphasis="true" Color="Color.Red" Inverted>
            <ParagraphDemo />
        </Segment>
        <Segment Emphasis="false" Color="Color.Red" Inverted>
            <ParagraphDemo />
        </Segment>
        <br />
        <Segment Color="Color.Green" Inverted>
            <ParagraphDemo />
        </Segment>
        <Segment Emphasis="true" Color="Color.Green" Inverted>
            <ParagraphDemo />
        </Segment>
        <Segment Emphasis="false" Color="Color.Green" Inverted>
            <ParagraphDemo />
        </Segment>
        <br />
        <Segment Color="Color.Black" Inverted>
            <ParagraphDemo />
        </Segment>
        <Segment Emphasis="true" Color="Color.Black" Inverted>
            <ParagraphDemo />
        </Segment>
        <Segment Emphasis="false" Color="Color.Black" Inverted>
            <ParagraphDemo />
        </Segment>
        <br />
        <Segment Color="Color.Pink" Inverted>
            <ParagraphDemo />
        </Segment>
        <Segment Emphasis="true" Color="Color.Pink" Inverted>
            <ParagraphDemo />
        </Segment>
        <Segment Emphasis="false" Color="Color.Pink" Inverted>
            <ParagraphDemo />
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment>
    <ParagraphDemo />
</Segment>
<Segment Emphasis=""true"">
    < ParagraphDemo />
</Segment>
<Segment Emphasis=""false"">
    <ParagraphDemo />
</Segment>
<br />
<Segment Color=""Color.Red"" Inverted>
    <ParagraphDemo />
</Segment>
<Segment Emphasis=""true"" Color=""Color.Red"" Inverted>
    <ParagraphDemo />
</Segment>
<Segment Emphasis=""false"" Color=""Color.Red"" Inverted>
    <ParagraphDemo />
</Segment>
<br />
<Segment Color=""Color.Green"" Inverted>
    <ParagraphDemo />
</Segment>
<Segment Emphasis=""true"" Color=""Color.Green"" Inverted>
    <ParagraphDemo />
</Segment>
<Segment Emphasis=""false"" Color=""Color.Green"" Inverted>
    <ParagraphDemo />
</Segment>
<br />
<Segment Color=""Color.Black"" Inverted>
    <ParagraphDemo />
</Segment>
<Segment Emphasis=""true"" Color=""Color.Black"" Inverted>
    <ParagraphDemo />
</Segment>
<Segment Emphasis=""false"" Color=""Color.Black"" Inverted>
    <ParagraphDemo />
</Segment>
<br />
<Segment Color=""Color.Pink"" Inverted>
    <ParagraphDemo />
</Segment>
<Segment Emphasis=""true"" Color=""Color.Pink"" Inverted>
    <ParagraphDemo />
</Segment>
<Segment Emphasis=""false"" Color=""Color.Pink"" Inverted>
    <ParagraphDemo />
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Attached" Id="attach">
    <Description>
        A segment can be attached to other content on a page
    </Description>
    <RunTemplate>
        <Header4 Attached AttachedVertical="VerticalPosition.Top">
            Dogs
        </Header4>
        <Segment Attached>
            Dogs are one type of animal.
        </Segment>
        <Header4 Attached>
            Cats
        </Header4>
        <Segment Attached>
            Cats are thought of as being related to dogs, but only humans think this.
        </Segment>
        <Header4 Attached>
            Lions
        </Header4>
        <Segment Attached>
            Humans don't think of lions as being like cats, but they are.
        </Segment>
        <Message State="State.Warning" Attached AttachedVertical="VerticalPosition.Bottom">
            <Icon IconClass="attention"/>
            You've reached the end of this content segment
        </Message>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Header4 Attached AttachedVertical=""VerticalPosition.Top"">
    Dogs
</Header4>
<Segment Attached>
    Dogs are one type of animal.
</Segment>
<Header4 Attached>
    Cats
</Header4>
<Segment Attached>
    Cats are thought of as being related to dogs, but only humans think this.
</Segment>
<Header4 Attached>
    Lions
</Header4>
<Segment Attached>
    Humans don't think of lions as being like cats, but they are.
</Segment>
<Message State=""State.Warning"" Attached AttachedVertical=""VerticalPosition.Bottom"">
    <Icon IconClass=""attention""/>
    You've reached the end of this content segment
</Message>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Padded" Id="padded">
    <Description>
        A segment can increase its padding
    </Description>
    <RunTemplate>
        <Segment Padded>
            <ParagraphDemo />
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment Padded>
    <ParagraphDemo/>
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Fitted" Id="fitted">
    <Description>
        A segment can remove its padding, vertically or horizontally
    </Description>
    <RunTemplate>
        <Segment Fitted>
            <ParagraphDemo />
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment Fitted>
    <ParagraphDemo/>
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>
<PresentationPart Title="Compact" Id="compact">
    <Description>
        A segment may take up only as much space as is necessary
    </Description>
    <RunTemplate>
        <Segment Compact>
            Pellentesque habitant morbi
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment Compact>
    Pellentesque habitant morbi
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>
<PresentationPart Title="Circular" Id="circular">
    <Description>
        A segment can be circular
        <Message State="State.Info">
            A circular segment will most likely have to have its content manually sized to be equal width and height, otherwise it will flow to the size of your content
        </Message>
    </Description>
    <RunTemplate>
        <Segment Circular>
            <Header2>
                Buy Now
                <SubHeader>
                    $99.99
                </SubHeader>
            </Header2>
        </Segment>
        <Segment Circular Inverted>
            <Header2 Inverted>
                Buy Now
                <SubHeader>
                    $29.98
                </SubHeader>
            </Header2>
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment Circular>
    <Header2>
        Buy Now
        <SubHeader>
            $99.99
        </SubHeader>
    </Header2>
</Segment>
<Segment Circular Inverted>
    <Header2 Inverted>
        Buy Now
        <SubHeader>
            $29.98
        </SubHeader>
    </Header2>
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Floated" Id="floated">
    <Description>
        A segment can appear to the left or right of other content
    </Description>
    <RunTemplate>
        <Segment Floated="HorizontalPosition.Left">
            This segment will appear to the left
        </Segment>
        <Segment Floated="HorizontalPosition.Right">
            This segment will appear to the right
        </Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment Floated=""HorizontalPosition.Left"">
    This segment will appear to the left
</Segment>
<Segment Floated=""HorizontalPosition.Right"">
    This segment will appear to the right
</Segment>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Clear">
            <Description>
                A segment can clear floated content
            </Description>
            <RunTemplate>
                <Segment Clear>
                    <Button Floated="HorizontalPosition.Right">Floated</Button>
                </Segment>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Segment Clear>
    <Button Floated=""HorizontalPosition.Right"">Floated</Button>
</Segment>
```
")
            </CodeTemplate>
        </PresentationPart>
<PresentationPart Title="Text Alignment" Id="horizontal-align">
    <Description>
        A segment can have its text aligned to a side
    </Description>
    <RunTemplate>
        <Segment HorizontalAlignment="HorizontalAlignment.Right">Right</Segment>
        <Segment HorizontalAlignment="HorizontalAlignment.Left">Left</Segment>
        <Segment HorizontalAlignment="HorizontalAlignment.Center">Center</Segment>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment HorizontalAlignment=""HorizontalAlignment.Right"">Right</Segment>
<Segment HorizontalAlignment=""HorizontalAlignment.Left"">Left</Segment>
<Segment HorizontalAlignment=""HorizontalAlignment.Center"">Center</Segment>
```
")
    </CodeTemplate>
</PresentationPart>

        <PresentationPart Title="Basic">
            <Description>
                A basic segment has no special formatting
            </Description>
            <RunTemplate>
                <Segment Basic>
                    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
                </Segment>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Segment Basic>
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</Segment>
```
")
            </CodeTemplate>
        </PresentationPart>


<Header2 Divider>
    Groups
</Header2>


<PresentationPart Title="SegmentGroup" Id="SegmentGroup">
    <Description>
        A group of SegmentGroup can be formatted to appear together
    </Description>
    <RunTemplate>
        <SegmentGroup>
            <Segment>
                <ParagraphDemo />
            </Segment>
            <Segment>
                <ParagraphDemo />
            </Segment>
            <Segment>
                <ParagraphDemo />
            </Segment>
        </SegmentGroup>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<SegmentGroup>
    <Segment>
        ...
    </Segment>
    <Segment>
        ...
    </Segment>
    <Segment>
        ...
    </Segment>
</SegmentGroup>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Basic SegmentGroup" Id="basic">
    <RunTemplate>
        <SegmentGroup Basic>
            <Segment>
                <ParagraphDemo />
            </Segment>
            <Segment>
                <ParagraphDemo />
            </Segment>
            <Segment>
                <ParagraphDemo />
            </Segment>
        </SegmentGroup>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<SegmentGroup Basic>
    <Segment>
        ...
    </Segment>
    <Segment>
        ...
    </Segment>
    <Segment>
        ...
    </Segment>
</SegmentGroup>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Nested SegmentGroup" Id="nesting">
    <RunTemplate>
        <SegmentGroup>
            <Segment><ParagraphDemo /></Segment>
            <SegmentGroup>
                <Segment>
                    <ParagraphDemo />
                </Segment>
                <Segment>
                    Nested
                </Segment>
            </SegmentGroup>
            <Segment>
                Nested Content
            </Segment>
            <SegmentGroup Horizontal>
                <Segment>Top</Segment>
                <Segment>Middel</Segment>
                <Segment>Bottom</Segment>
            </SegmentGroup>
            <Segment>
                <ParagraphDemo />
            </Segment>
        </SegmentGroup>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<SegmentGroup>
    <Segment><ParagraphDemo/></Segment>
    <SegmentGroup>
        <Segment>
            <ParagraphDemo />
        </Segment>
        <Segment>
            Nested
        </Segment>
    </SegmentGroup>
    <Segment>
        Nested Content
    </Segment>
    <SegmentGroup Horizontal>
        <Segment>Top</Segment>
        <Segment>Middel</Segment>
        <Segment>Bottom</Segment>
    </SegmentGroup>
    <Segment>
        <ParagraphDemo/>
    </Segment>
</SegmentGroup>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="Horizontal SegmentGroup" Id="horizontal">
    <Description>
        A segment group can appear horizontally
    </Description>
    <RunTemplate>
        <SegmentGroup Horizontal>
            <Segment>
                <ParagraphDemo />
            </Segment>
            <Segment>
                <ParagraphDemo />
            </Segment>
            <Segment>
                <ParagraphDemo />
            </Segment>
        </SegmentGroup>

        <br />
        <SegmentGroup Horizontal Basic>
            <Segment>
                <ParagraphDemo />
            </Segment>
            <Segment>
                <ParagraphDemo />
            </Segment>
            <Segment>
                <ParagraphDemo />
            </Segment>
        </SegmentGroup>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<SegmentGroup Horizontal>
    <Segment>
        <ParagraphDemo />
    </Segment>
    <Segment>
        <ParagraphDemo />
    </Segment>
    <Segment>
        <ParagraphDemo />
    </Segment>
</SegmentGroup>

<br />
<SegmentGroup Horizontal Basic>
    <Segment>
        <ParagraphDemo />
    </Segment>
    <Segment>
        <ParagraphDemo />
    </Segment>
    <Segment>
        <ParagraphDemo />
    </Segment>
</SegmentGroup>
```
")
    </CodeTemplate>
</PresentationPart>
<PresentationPart Title="Raised SegmentGroup" Id="SegmentGroup-raised">
    <Description>
        A group of SegmentGroup can be raised
    </Description>
    <RunTemplate>
        <SegmentGroup Raised>
            <Segment>
                <ParagraphDemo />
            </Segment>
            <Segment>
                <ParagraphDemo />
            </Segment>
            <Segment>
                <ParagraphDemo />
            </Segment>
        </SegmentGroup>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<SegmentGroup Raised>
    <Segment>
        <ParagraphDemo />
    </Segment>
    <Segment>
        <ParagraphDemo />
    </Segment>
    <Segment>
        <ParagraphDemo />
    </Segment>
</SegmentGroup>
```
")
    </CodeTemplate>
</PresentationPart>
<PresentationPart Title="Stacked SegmentGroup" Id="SegmentGroup-stacked">
    <Description>
        A group of SegmentGroup can be stacked
    </Description>
    <RunTemplate>
        <SegmentGroup Stacked>
            <Segment>
                <ParagraphDemo />
            </Segment>
            <Segment>
                <ParagraphDemo />
            </Segment>
            <Segment>
                <ParagraphDemo />
            </Segment>
        </SegmentGroup>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<SegmentGroup Stacked>
    <Segment>
        <ParagraphDemo />
    </Segment>
    <Segment>
        <ParagraphDemo />
    </Segment>
    <Segment>
        <ParagraphDemo />
    </Segment>
</SegmentGroup>
```
")
    </CodeTemplate>
</PresentationPart>
<PresentationPart Title="Piled SegmentGroup" Id="SegmentGroup-piled">
    <Description>
        A group of SegmentGroup can be piled
    </Description>
    <RunTemplate>
        <div style="z-index:1;position:relative">
            <SegmentGroup Piled>
                <Segment>
                    <ParagraphDemo />
                </Segment>
                <Segment>
                    <ParagraphDemo />
                </Segment>
                <Segment>
                    <ParagraphDemo />
                </Segment>
            </SegmentGroup>
        </div>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<div style=""z-index:1;position:relative"">
    <SegmentGroup Piled>
        <Segment>
            <ParagraphDemo />
        </Segment>
        <Segment>
            <ParagraphDemo />
        </Segment>
        <Segment>
            <ParagraphDemo />
        </Segment>
    </SegmentGroup>
</div>
```
")
    </CodeTemplate>
</PresentationPart>        
    </Body>
</Pager>
@code {
    List<string> Menu = new List<string>(new[]
        {
        "Demo","Raised","Disabled","Loading","Placeholder","Stacked","Piled",
        "Vertical","Inverted","Color","Emphasis","Attached","Padded","Fitted",
        "Compact","Circular","Floated","Clear","Text Alignment","Basic","SegmentGroup","Basic SegmentGroup","Nested SegmentGroup","Horizontal SegmentGroup","Raised SegmentGroup","Stacked SegmentGroup",
        "Piled SegmentGroup"
    });
}